<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--
       viewport表示用户是否可以缩放页面；
       width指定视区的逻辑宽度；
       device-width指示视区宽度应为设备的屏幕宽度；
       initial-scale指令用于设置Web页面的初始缩放比例
       initial-scale=1则将显示未经缩放的Web文档
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/CSS/style.css" rel="stylesheet"/>
    <title>文件管理</title>
</head>
<body>
<div class="root">
    <div class="test">
        <div class="button-group" aria-label="...">
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#exampleModal"
                    data-whatever="文件夹"
            >新建文件夹
            </button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#exampleModal3"
                    data-whatever="文件">创建文件
            </button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#exampleModal2"
                    data-whatever="文件"
            >上传文件
            </button>
        </div>
        <div class="panel panel-default card-user-show">
            <h3 style="margin: 0" id="user-name-show">用户:</h3>
            <button id="sign-out" type="button" class="btn btn-default" data-toggle="modal"
            >退出登录
            </button>
        </div>
        <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">创建</h4>
                    </div>
                    <div class="modal-body">
                        <form action="/receive-file" method="post" enctype="multipart/form-data">
                            <input type="file" id="file-sent" name="file-sent">
                        </form>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button id="file-uploader" type="button" class="btn btn-primary" data-dismiss="modal">保存
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">创建</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">文件夹名:</label>
                                <input type="text" class="form-control" id="folder-name">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="folder-creator" type="button" class="btn btn-primary" data-dismiss="modal">保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">创建</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">文件名:</label>
                                <input type="text" class="form-control" id="file-name">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="file-creator" type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default" style=" height: 800px; width: 100%;display: flex;flex-direction: row;justify-content: center;background-color: rgb(255,255,255);">
        <div class="panel panel-default" style="height: 100% ;width: 24%">
            <!-- Default panel contents -->
            <div class="panel-heading" id="path-show">file-path-show</div>
            <!-- List group -->
            <div id="fileShow" class="demo">
            </div>
        </div>
        <div class="editor-cont">

            <div class="panel panel-default" style="height: 100%">
                <div class="panel-heading" id="file-name-show">file-name</div>
                <div class="panel-body" style="height: 740px ;width: 100%">
                    <div class="content-show" id="content-show">
                        <textarea id="editor" class="editor"></textarea>
                    </div>
                    <div class="button-save">
                        <a href="" id="file-down" style="margin: 8px 0">
                            <button type="button" class="btn btn-default" style="margin: 12px 0">下载文件
                            </button>
                        </a>
                        <button id="save-file" type="button" class="btn btn-default" style="margin: 12px 0">保存文件
                        </button>
                        <button id="delete-file" type="button" class="btn btn-default" style="margin: 12px 0">删除文件
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script src="../static/JS/axios.js"></script>
<script src="../static/JS/jquary.js"></script>
<script src="../static/JS/file.js"></script>
<script src="../static/JS/bootstrap.js"></script>
<script>
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text('新建 ' + recipient)
    })
</script>
<script>
    $('#exampleModal3').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text('新建 ' + recipient)
    })
</script>
<script>
    $('#exampleModal2').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever')
        var modal = $(this)
        modal.find('.modal-title').text('上传' + recipient)
    })
</script>
</html>